import React, { useEffect, useState } from 'react';
import axios from "../../../utils/request"
import { Button, Drawer, Form, Input, message } from "antd"
import "./style.scss"
const Index = () => {
    const [list, setList] = useState([])
    const [visible, setVisible] = useState(false);
    const [Addvisible, setAddvisible] = useState(false);
    const [item,setItem]=useState({})
    const getList = async () => {
        const res = await axios.get('/getList')
        setList(res.data.data)
    }
    useState(() => {
        getList()
    }, [])
    const showDrawer = (v) => {
        setItem(v)
        setVisible(true);
        
    };
    const onClose = () => {
        setVisible(false);
    };
    const addShowDrawer = () => {
        setAddvisible(true);
        
    };
    const onAddClose = () => {
        setAddvisible(false);
    };
    const onFinish = async(values) => {
        const res=await axios.put('/editList',{
            ...values,
            id:item.id
        })
        const {code,mes}=res.data
        if(code===200){
            message.success(mes)
            getList()
        }else{
            message.error(mes)
        }
    };
    const onAddFinish=async(values)=>{
        console.log(values)
        const res=await axios.post('/addList',values)
        const {code,mes}=res.data
        if(code===200){
            message.success(mes)
            getList()
        }else{
            message.error(mes)
        }
    }
    const delItem=async(id)=>{
        const res=await axios.delete('/delList',{
            params:{
                id
            }
        })
        const {code,mes}=res.data
        if(code===200){
            message.success(mes)
            getList()
        }else{
            message.error(mes)
        }
    }
    return (
        <div className="listWrap">
            <Button type="primary" onClick={()=>addShowDrawer()}>添加</Button>
            {
                list.length && list.map((v, i) => {
                    return (
                        <dl key={i}>
                            <dt><h3>{v.title}</h3></dt>
                            <dd><p>{v.detail}</p>
                                <b>{v.tips}</b></dd>
                            <dd className='btns'>
                                <Button type="primary" onClick={()=>showDrawer(v)}>编辑</Button>
                                <Button onClick={()=>delItem(v.id)}>删除</Button>
                            </dd>
                        </dl>
                    )
                })
            }
            <Drawer title="修改" placement="right" onClose={onClose} visible={visible}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[
                            {
                                message: '请输入内容',
                            },
                        ]}
                    >
                        <Input defaultValue={item.title} />
                    </Form.Item>

                    <Form.Item
                        label="描述"
                        name="detail"
                        rules={[
                            {
                                message: '请输入内容',
                            },
                        ]}
                    >
                        <Input defaultValue={item.detail}/>
                    </Form.Item>
                    <Form.Item
                        label="标签"
                        name="tips"
                        rules={[
                            {
                                message: '请输入内容',
                            },
                        ]}
                    >
                        <Input defaultValue={item.tips}/>
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            <Drawer title="添加" placement="left" onClose={onAddClose} visible={Addvisible}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onAddFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[
                            {
                                message: '请输入内容',
                            },
                        ]}
                    >
                        <Input  />
                    </Form.Item>

                    <Form.Item
                        label="描述"
                        name="detail"
                        rules={[
                            {
                                message: '请输入内容',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="标签"
                        name="tips"
                        rules={[
                            {
                                message: '请输入内容',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    );
}

export default Index;
